<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待生产订单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<a href="">订单排单</a>
<div id="app">
    <el-table style="width: 100%"
              :data="order"
              :default-sort = "{prop: 'number', order: 'ascending'}"
              ref="siteTable"
              :border="border">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="订单编号">
            <template slot-scope="scope">
                <span>{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column label="订单类型">
            <template slot-scope="scope">
                <span>{{ scope.row.orderType }}</span>
            </template>
        </el-table-column>
        <el-table-column label="生产计划编号">
            <template slot-scope="scope">
                <span>{{ scope.row.productPlanNo }}</span>
            </template>
        </el-table-column>

        <el-table-column prop="number" label="生产数量" sortable>
            <template slot-scope="scope">
                <span>{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column label="生产产线">
            <template slot-scope="scope">
                <span v-if="scope.row.productLineId != null">{{ scope.row.productionLine.productionName }}</span>
            </template>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="productPlanTime" label="开始生产时间" sortable>
            <template   slot-scope="scope">
                <span>{{ scope.row.productPlanTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="结束生产时间">
            <template slot-scope="scope">
                <span>{{ scope.row.productPlanOvertime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="生产状态(2.未生产 3.已完成)">
            <template slot-scope="scope">
                <span style="color: red">{{ scope.row.productStatus }}</span>
            </template>
        </el-table-column>
        <el-table-column label="备注">
            <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="small"
                        type="success"
                        @click="handleEdit(scope.$index, scope.row)"
                        :disabled="scope.row.productStatus == '3'"
                >设置排单</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="设置排单" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
        <el-form :model="orders">
            <el-form-item label="订单编号">
                <el-input v-model="orders.orderId" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="orders">
            <el-form-item label="生产编号">
                <el-input v-model="orders.productPlanNo" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form >
            <el-form-item label="生产产线">
            <el-select v-model="orders.productLineId" style="width: 150px;" @change="" clearable placeholder="请选择">
                <el-option
                        v-for="item in lines"
                        :key="item.productionName"
                        :label="item.productionName"
                        :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <el-form :model="orders">
            <el-form-item label="开始生产时间">
                <el-col>
                    <el-date-picker
                            @change="dateChange(date)"
                            type="date" placeholder="选择日期"
                            v-model="orders.productPlanTime" style="width: 145px;"></el-date-picker>
                </el-col>
            </el-form-item>
        </el-form>
        <el-form :model="orders">
            <el-form-item label="结束生产时间">
                <el-col>
                    <el-date-picker
                            @change="datesChange(dates)"
                            type="date" placeholder="选择日期"
                            v-model="orders.productPlanOvertime" style="width: 145px;"></el-date-picker>
                </el-col>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrgan()">确 定</el-button>
        </div>
    </el-dialog>
    <div class="block" style="margin-top: 10px;">
        <span class="demonstration">跳转</span>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="page_size"
                :page-size="4"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
                :background="back">
        </el-pagination>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //分页数据
                order:[],
                orders:[],
                line:[],
                lines:[],
                // 当前页数
                currentPage: 1,
                // 表格边框
                border: true,
                // 当前每页的数据
                pageSize : 6,
                current: 1,
                count: 1,
                page_size : [6,3],
                // 每页的数据
                pageSizes:[5,10,20,50],
                // 分页背景
                back: true,
                // 创建日期
                date: null,
                dates: null,
                dialogFormVisible: false,
                //当前选中的行
                current0:[],
                formInline:{
                    id:"",status:""
                }
            }
        },
        methods: {
            // 加载产线数据
            loadPage:function(){
                axios.get("/productionLines")
                .then(res=>{
                    this.lines = res.data;
                    console.log(this.lines)
                });
           //加载排单表
                axios.get("/order2s/"+this.currentPage+"/"+this.pageSize)
                    .then(res=>{
                        this.order = res.data.data;
                        this.count = res.data.count;
                        console.log(this.order)
                    });
            },
            dateChange(date){
                if (date == null){
                    return;
                }
                let Y = date.getFullYear() +  '-' ;
                let M = (date.getMonth()+1 < 10 ?  '0' +(date.getMonth()+1) : date.getMonth()+1) +  '-' ;
                let D = date.getDate() +  ' ' ;
                this.date = Y+M+D;
            },
            datesChange(dates){
                if (dates == null){
                    return;
                }
                let Y = dates.getFullYear() +  '-' ;
                let M = (dates.getMonth()+1 < 10 ?  '0' +(dates.getMonth()+1) : dates.getMonth()+1) +  '-' ;
                let D = dates.getDate() +  ' ' ;
                this.dates = Y+M+D;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPage();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadPage();
            },
            handleEdit(index, row){
                this.dialogFormVisible = true;
                this.orders = row;
                console.log(this.orders)
            },
            //更新
            saveOrgan(){
              this.orders.productStatus = 3 ;
                  console.log(this.orders.productStatus);
                axios.put("/order2s",this.orders)
                    .then(res => {
                        if (res.data == "ok") {
                            this.loadPage();
                            console.log(this.orders)
                        }
                    });
                     this.dialogFormVisible = false;
            },
            onSubmit(){

            },

            closeDialog(){

            },
        },

        mounted() {
            this.loadPage();
        }

    })
</script>
</html>